<template>
    <!-- 订单详情页 -->
    <view class="detail">
        <topHeader :title="'订单详情'" :back="true" :home_th="home_th"></topHeader>
        <view class="indent_text" v-if="!preShow">
            <view class="top_tag" :style="{ backgroundColor }">{{ indentData.status_text }}</view>
            <view class="order item" @click="fuzhifn">
                <text class="left">重复售后次数：</text>
                <text class="right">{{ digit[indentData.handle_time] }}次处理</text>
            </view>
            <view class="order item" @click="fuzhifn">
                <text class="left">订单号：</text>
                <text class="right">{{ indentData.order_no }}</text>
            </view>
            <view class="order_out item">
                <text class="left">退单号：</text>
                <text class="right">{{ indentData.refund_order_no }}</text>
            </view>
            <view class="name item">
                <text class="left">买家昵称：</text>
                <text class="right">{{ indentData.name }}</text>
            </view>
            <view class="username item">
                <text class="left">买家姓名：</text>
                <text class="right">{{ indentData.username }}</text>
            </view>
            <view class="phone item">
                <text class="left">买家电话：</text>
                <text class="right">{{ indentData.phone }}</text>
            </view>
            <view class="type item">
                <text class="left">售后类型：</text>
                <text class="right">{{ indentData.refund_type_text }}</text>
            </view>
            <view class="type item">
                <text class="left">售后问题：</text>
                <text class="right">{{ indentData.question_type_text }}</text>
            </view>
            <view class="cause item">
                <text class="left">退货原因：</text>
                <text class="right">{{ indentData.refund_reason }}</text>
            </view>
            <view class="cause item">
                <text class="left">特别备注：</text>
                <text class="right">{{ indentData.note }}</text>
            </view>
            <view class="audit item">
                <text class="left">退款审核：</text>
                <text class="right">{{ indentData.refund_status_text }}</text>
            </view>
            <view class="image_box">
                <text>附件图片：</text>

                <view class="images">
                    <uni-file-picker readonly :value="fileLists" :imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
                    <!-- TODO -->
                    <!-- <image class="image" :src="`https://sp.wwtscm.com${item}`" mode="" v-for="item in indentData.images.split(',')" :key="item"></image> -->
                </view>
            </view>
        </view>
        <view class="result_shop" v-if="!preShow" :style="{ pointerEvents: !submitShow ? 'none' : '' }">
            <view class="title">供应商反馈</view>
            <view class="dispose_jg item">
                <text class="left">是否回复买家:</text>
                <uni-section type="line" class="select">
                    <uni-data-select v-model="hfValue" :localdata="sfhfmj" @change="selectChange"></uni-data-select>
                </uni-section>
            </view>
            <view class="dispose_jg item">
                <text class="left">处理结果:</text>
                <uni-section type="line" class="select">
                    <uni-data-select v-model="selectValue" :localdata="selectList" @change="selectChange"></uni-data-select>
                </uni-section>
            </view>
            <view class="remark">
                <view class="left">供应商备注:</view>
                <textarea class="textarea" placeholder="请输入备注内容" v-model="submitData.remark" />
            </view>
            <view class="express_out">
                <view class="left">补发物流:</view>
                <view class="right">
                    <view class="">
                        <view class="input_bo" v-for="(item, index) in reissue_logistics" :key="index">
                            <uni-data-select
                                style="width: 200rpx; margin-right: 10rpx; height: 60rpx; font-size: 10px"
                                v-model="value[index]"
                                :localdata="range"
                                @change="changereissue(index)"
                                placeholder="快递名称"
                            ></uni-data-select>
                            <input type="text" class="input" placeholder="物流单号" v-model="item.express_no" />
                            <view class="outdel">
                                <uni-icons @click="delreissueFn" v-show="reissue_logistics.length > 1" custom-prefix="iconfont" type="icon-wrong-3" size="18"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="add_item" @click="reissueFn">+</view>
                </view>
            </view>
            <view class="express_bufa">
                <view class="left">退货物流:</view>
                <view class="right">
                    <view class="">
                        <view class="input_bo" v-for="(item, index) in refund_logistics" :key="index">
                            <uni-data-select
                                style="width: 200rpx; margin-right: 10rpx; height: 60rpx; font-size: 10px"
                                v-model="valuerefund[index]"
                                :localdata="range"
                                @change="changerefund(index)"
                                placeholder="快递名称"
                            ></uni-data-select>
                            <input type="text" class="input" placeholder="物流单号" v-model="item.express_no" />
                            <view class="outdel">
                                <uni-icons @click="delrefundFn" v-show="refund_logistics.length > 1" custom-prefix="iconfont" type="icon-wrong-3" size="18"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="add_item" @click="refundFn">+</view>
                </view>
            </view>

            <view class="btn_box">
                <view class="btn" @click="submitFn" v-show="submitShow">提交信息</view>
            </view>
        </view>
        <view class="aftersale" v-if="!preShow" @click="shareToggle">
            <text class="text">售后记录</text>
            <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
        </view>
        <uni-popup ref="share" v-if="!preShow" type="share" safeArea backgroundColor="transparent">
            <view class="box">
                <view class="title">售后记录</view>
                <view class="list_box">
                    <view class="item" style="font-weight: 600">
                        <text class="left">处理过程</text>
                        <text class="name">处理人</text>
                        <text class="right">处理时间</text>
                    </view>
                    <view class="item_box" v-for="(item, index) in orderrecordData" :key="item.createtime_text">
                        <view class="item" @click="foldFn(index)">
                            <text class="left">{{ item.title }}</text>
                            <text class="name">{{ item.name }}</text>
                            <text class="right">{{ item.createtime_text }}</text>
                            <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="10"></uni-icons>
                        </view>
                        <view class="fold" v-if="index == foldShow">
                            <text class="view">当前状态：</text>
                            <text>{{ item.result }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
        <!-- 售前 数据 -->
        <view class="indent_text" v-if="preShow">
            <view class="top_tag" :style="{ backgroundColor }">{{ preSalesList.notes }}</view>
            <view class="name item">
                <text class="left">咨询时间：</text>
                <text class="right">{{ preSalesList.time_text }}</text>
            </view>
            <view class="username item">
                <text class="left">咨询方式：</text>
                <text class="right">{{ preSalesList.type_text }}</text>
            </view>
            <view class="phone item">
                <text class="left">问题说明：</text>
                <text class="right">{{ preSalesList.content }}</text>
            </view>
            <view class="audit item">
                <text class="left">咨询问题：</text>
                <text class="right">{{ preSalesList.details }}</text>
            </view>
            <view class="remark">
                <text class="left">备注：</text>
                <textarea class="textarea" placeholder="请输入备注内容" v-model="preSalesList.notes2"></textarea>
            </view>
            <view class="order_out item">
                <text>问题处理：</text>
                <uni-data-select style="width: 200rpx; margin-top: 15rpx; height: 60rpx" v-model="shouqvalue" :localdata="shouqianrange" placeholder="处理反馈"></uni-data-select>
            </view>
            <view class="btn_box">
                <view class="btn" @click="submitShouqianFn">提交信息</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import topHeader from '@/pages/components/topHeader.vue';
import tarbar from '@/pages/components/tarbar.vue';
import { indentDetail, indentList, indentSubmit, orderrecord, expressName, consultationDetApi, consultationSubApi } from '@/pages/request/loginApi.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad((option) => {
    home_th.value = option.type;
    if (option.shouqian == 'sq') {
        preShow.value = true;
        consultationDetFn(option.id);
    } else {
        preShow.value = false;
        submitData.value.id = option.id;
        detailFn(option.id);
        expressFn();
    }
});
const fileLists = ref([]); //图片列表
const imageStyles = ref({
    width: 64,
    height: 64
    // border: {
    //     radius: '50%'
    // }
});
// 售前订单
const notes2 = ref();
const shouqianrange = ref([
    { value: 1, text: '已解决' },
    { value: 2, text: '未解决' }
]);
const shouqvalue = ref();
const preShow = ref(false);
const preSalesList = ref({
    // name: '客户',
    // phone: '123456789',
    // matter: '产品有啥附赠品',
    // time: '2024-8-10',
    // result: '',
    // type: '待处理',
    // goods: '超级大灰机 nf-1200',
    // notes2: ''
});
const digit = ['首', '二', '三', '四', '五', '六', '七', '八', '九'];
const home_th = ref();
async function consultationDetFn(id) {
    const res = await consultationDetApi({ id });
    preSalesList.value = res.data;
    // console.log(res);
}
// 复制订单号
function fuzhifn() {
    console.log(122);
    uni.setClipboardData({
        data: indentData.value.order_no,
        success: function () {
            uni.showToast({
                title: '复制成功'
            });
        }
    });
}
// 弹出层
const share = ref(null);
function shareToggle() {
    share.value.open();
}
const submitShow = ref(true);
const selectList = ref([]);
const hfValue = ref(0); //是回复
const sfhfmj = ref([
    { text: '已回复', value: 1 },
    { text: '未回复', value: 2 }
]);
const indentData = ref({
    status_text: ''
});
const backgroundColor = ref('#1FBB6A');
const selectValue = ref();
const orderrecordData = ref([]);
const refund_logistics = ref([]);
const reissue_logistics = ref([]);
const submitData = ref({
    remark: '',
    id: ''
});
function selectChange() {
    // console.log(selectValue.value);
}
// 快递信息
async function expressFn() {
    const res = await expressName();
    // console.log(res.data);

    let arr = [];
    res.data.forEach((item, index) => {
        arr.push({ value: item.id, text: item.name });
    });
    range.value = arr;
}
function changereissue(index) {
    reissue_logistics.value[index].express_name = range.value[value.value[index] - 1].text;
}
function changerefund(index) {
    refund_logistics.value[index].express_name = range.value[valuerefund.value[index] - 1].text;
}
const value = ref([]);
const valuerefund = ref([]);
const range = ref([]);
// 快递信息添加和删除
function delreissueFn() {
    reissue_logistics.value.pop();
}
function delrefundFn() {
    refund_logistics.value.pop();
}
function reissueFn() {
    reissue_logistics.value.push({ express_name: '', express_no: '' });
}
function refundFn() {
    refund_logistics.value.push({ express_name: '', express_no: '' });
}
// 获取订单详情
async function detailFn(id) {
    const res = await indentDetail({ id: id }); //详情
    const list = await indentList(); //处理选项
    const data = await orderrecord({ id: id }); //处理选项
    data.data.forEach((item) => {
        orderrecordData.value.unshift(item);
    });
    list.data.forEach((item, index) => {
        if (item != '请选择') {
            selectList.value.push({ value: index, text: item });
        }
    });
    indentData.value = res.data; //订单数据i
    // hfValue.value = 1;
    hfValue.value = res.data.is_reply;
    let arrimage = indentData.value.images.split(',');
    // console.log(arrimage);
    let fileurl = [];
    arrimage.forEach((item) => {
        fileurl.push({ url: `https://sp.wwtscm.com${item}` });
    });
    fileLists.value = fileurl;
    if (res.data.refund_logistics) {
        let refundList;
        if (Array.isArray(res.data.refund_logistics)) {
            refundList = res.data.refund_logistics;
        } else {
            refundList = [{ express_name: '', express_no: '' }];
        }

        refundList.forEach((item) => {
            // console.log(item);
            range.value.forEach((kuaidi) => {
                if (kuaidi.text == item.express_name) {
                    valuerefund.value.push(kuaidi.value);
                }
            });
            refund_logistics.value.push({ express_name: item, express_no: item.express_no });
        });
    } else {
        refundFn();
    }
    if (res.data.reissue_logistics) {
        let reissueList;
        if (Array.isArray(res.data.reissue_logistics)) {
            reissueList = res.data.reissue_logistics;
        } else {
            reissueList = [{ express_name: '', express_no: '' }];
        }
        reissueList.forEach((item) => {
            range.value.forEach((kuaidi) => {
                if (kuaidi.text == item.express_name) {
                    value.value.push(kuaidi.value);
                }
            });
            reissue_logistics.value.push({ express_name: item, express_no: item.express_no });
        });
    } else {
        reissueFn();
    }

    submitData.value.remark = res.data.feedback;
    selectList.value.forEach((item) => {
        if (item.text == res.data.result_text) {
            selectValue.value = item.value;
        }
    });
    if (indentData.value.status_text == '纠纷') {
        backgroundColor.value = '#E9552D';
    } else if (indentData.value.status_text == '已完成') {
        submitShow.value = false;
        backgroundColor.value = '#1FBB6A';
    } else if (indentData.value.status_text == '退款审核') {
        backgroundColor.value = '#9568FE';
        submitShow.value = false;
    } else if (indentData.value.status_text == '处理中') {
        backgroundColor.value = '#5081C2';
    } else if (indentData.value.status_text == '待处理') {
        backgroundColor.value = '#FFC556';
    } else if (indentData.value.status_text == '紧急') {
        backgroundColor.value = '#DA1C1C';
    }
}
// 提交订单 数据---
async function submitFn() {
    // console.log(reissue_logistics.value, refund_logistics.value);
    let refund = [];
    refund_logistics.value.forEach((item) => {
        refund.push(`${item.text}:${item.value}`);
    });
    let reissue = [];
    reissue_logistics.value.forEach((item) => {
        reissue.push(`${item.text}:${item.value}`);
    });
    const res = await indentSubmit({
        refund_logistics: refund_logistics.value,
        reissue_logistics: reissue_logistics.value,
        result: selectValue.value,
        feedback: submitData.value.remark,
        id: submitData.value.id,
        is_reply: hfValue.value
    });
    if (res.code == 1) {
        uni.showToast({
            title: '提交成功'
        });
        setTimeout(() => {
            fn();
        }, 1000);
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }
}
const currentTab = ref();
const fn = () => {
    const res = getCurrentPages();
    currentTab.value = res[res.length - 2].$page.fullPath;
    uni.reLaunch({
        url: currentTab.value
    });
};
//售后记录 下拉
const foldShow = ref();
function foldFn(num) {
    if (foldShow.value == num) {
        foldShow.value = -1;
        return;
    }
    foldShow.value = num;
}
// 售前
async function submitShouqianFn() {
    const res = await consultationSubApi({ id: preSalesList.value.id, is_solve: shouqvalue.value });
    if (res.code == 0) {
        uni.showToast({
            title: '提交成功'
        });
        fn();
    }
}
</script>

<style lang="scss" scoped>
.detail {
    font-size: 28rpx;
    padding-bottom: 20rpx;
    background-color: #e5f4ff;
    min-height: 100vh;
    .indent_text {
        width: 700rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        padding: 0 30rpx;
        padding-bottom: 15rpx;
        .top_tag {
            width: 108rpx;
            height: 58rpx;
            line-height: 58rpx;
            text-align: center;
            font-size: 24rpx;
            border-radius: 12rpx;
        }
        .item {
            margin: 40rpx 0;
            padding: 6rpx;
            .left {
                color: #000;
                font-weight: 600;
            }
            .right {
                color: #666;
            }
        }
        .order_out {
            display: flex;
            align-items: center;
            .left {
                margin-right: 20rpx;
            }
        }

        .image_box {
            padding: 20rpx 6rpx;
            background-color: #f1f1f1;
            display: flex;
            border-radius: 12rpx;

            .image {
                width: 120rpx;
                height: 120rpx;
                border-radius: 12rpx;
                margin: 0 20rpx;
            }
        }
        .btn_box {
            width: 100%;
            padding: 40rpx 0;
            border-top: #f1f1f1 1rpx solid;
            .btn {
                width: 305rpx;
                height: 65rpx;
                border-radius: 33rpx;
                background-color: #3e86e3;
                font-size: 32rpx;
                color: #fff;
                line-height: 65rpx;
                text-align: center;
                margin: 0 auto;
            }
        }
        .remark {
            border-top: #f1f1f1 1rpx solid;
            padding: 20rpx 0;
            display: flex;
            flex-direction: column;
            .left {
                margin-bottom: 15rpx;
            }
            .textarea {
                // background-color: #f1f1f1;
                border: #f1f1f1 solid 1rpx;
                width: 640rpx;
                height: 200rpx;
                padding: 10rpx;
                margin-bottom: 20rpx;
            }
        }
    }
    .result_shop {
        width: 700rpx;
        margin: 20rpx auto;
        background-color: #fff;
        border-radius: 15rpx;
        font-size: 28rpx;
        padding: 0 20rpx;
        padding-top: 20rpx;
        .title {
            font-size: 32rpx;
            font-weight: 600;
            margin-top: 30rpx;
            margin-bottom: 20rpx;
        }
        .dispose_jg {
            border-top: #f1f1f1 1rpx solid;
            padding: 5rpx 0;
            .left {
                flex-shrink: 0;
            }
            ::v-deep .uni-select {
                font-size: 28rpx;
                border: none;
                .uni-select__selector-item {
                    font-size: 24rpx;
                }
            }
        }
        .left {
            color: #000;
            font-weight: 600;
            margin-right: 20rpx;
            flex-shrink: 0;
        }
        .item {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-top: #f1f1f1 1rpx solid;
            .select {
                flex: 1;
            }
        }
        .remark {
            border-top: #f1f1f1 1rpx solid;
            padding: 20rpx 0;
            display: flex;
            .left {
                margin-bottom: 15rpx;
            }
            .textarea {
                // background-color: #f1f1f1;
                border: #f1f1f1 solid 1rpx;
                width: 640rpx;
                height: 200rpx;
                padding: 10rpx;
                margin-bottom: 20rpx;
            }
        }
        .express_out,
        .express_bufa {
            margin-bottom: 20rpx;
            display: flex;
            flex-direction: column;
            ::v-deep .uni-select__input-text {
                width: 120rpx;
                font-size: 10px;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
            }
            .left {
                margin-top: 0rpx;
                display: flex;
            }
            .right {
                display: flex;
                align-items: state;
                .input_bo {
                    margin-bottom: 15rpx;
                    display: flex;
                    align-items: center;
                    ::v-deep .uni-select__selector {
                        width: 310rpx;
                        .uni-select__selector-item {
                            white-space: nowrap;
                        }
                    }
                    ::v-deep .uni-select {
                        height: 60rpx;
                    }
                    .input {
                        border: #f1f1f1 solid 1rpx;
                        height: 60rpx;
                        border-radius: 12rpx;
                        padding: 0 10rpx;
                    }
                    .text {
                        width: 140rpx;
                        margin-right: 10rpx;
                    }
                    .outdel {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 20rpx;
                        margin-left: 10rpx;
                        text-align: center;
                        color: #fff;
                    }
                }
            }
            .add_item {
                // flex: 1;
                height: 60rpx;
                // width: 140rpx;
                padding: 10rpx;
                font-size: 40rpx;
                text-align: center;
                border-radius: 12rpx;
                background-color: #68b2e3;
                // background-color: rgba(62, 134, 227, 0.6);
                color: #fff;
                margin-left: 30rpx;
                line-height: 40rpx;
            }
        }
        .btn_box {
            width: 100%;
            padding: 40rpx 0;
            border-top: #f1f1f1 1rpx solid;
            .btn {
                width: 305rpx;
                height: 65rpx;
                border-radius: 33rpx;
                background-color: #3e86e3;
                font-size: 32rpx;
                color: #fff;
                line-height: 65rpx;
                text-align: center;
                margin: 0 auto;
            }
        }
    }
    .aftersale {
        width: 700rpx;
        height: 120rpx;
        background-color: #fff;
        margin: 0 auto;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 15rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
            font-weight: 600;
        }
    }
    .box {
        padding: 20rpx;
        border-radius: 12rpx 12rpx 0 0;
        background-color: #fff;
        .title {
            font-size: 32rpx;
            font-weight: 600;
            padding-bottom: 20rpx;
            border-bottom: #f1f1f1 solid 1rpx;
            text-align: center;
        }
        .list_box {
            .item {
                height: 85rpx;
                display: flex;
                justify-content: space-between;
                align-items: start;
                line-height: 85rpx;
                .left {
                    width: 25%;
                    flex-shrink: 0;
                    text-align: center;
                }
                .right {
                    width: 40%;
                    flex-shrink: 0;
                    text-align: center;
                }
                .name {
                    width: 30%;
                    padding-right: 15rpx;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .item_box {
                border-top: #f1f1f1 solid 1rpx;
                .item {
                    transition: all 2.3s;
                }
                .fold {
                    padding: 20rpx;
                    transition: all 2.3s;
                    transition: all 10s ease;
                    display: flex;
                    .view {
                        width: 30%;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
